<template>
  <div class="matrix">
    <!-- 这里的标签暂时用机具状态数据做全集 -->
    <!-- <div class="labelOption">
      <div class="labelOptionItem"  v-for="(item,index) in devStatuData" :key="index">
        <div class="label" :style="'background:'+(devRunStatuTrans[item.DEVRUNNINGSTATUS]?devRunStatuTrans[item.DEVRUNNINGSTATUS].devRunningStatusColor:'')+';'"></div>
        <span class="labelText">{{(devRunStatuTrans[item.DEVRUNNINGSTATUS]?devRunStatuTrans[item.DEVRUNNINGSTATUS].devRunningStatusName:"")}} - {{item.DEVICECOUNT}}名坐席</span>
      </div>
      <div style="clear:both;"></div>
    </div> -->
    <div class="matrixPanelCtn">
      <div class="matrixPanel detailPanel" v-for="(item,index) in data" :key="index" @click="clickDetail(item)" >
        <!-- devtype -->
        <p>{{item.agentId+"-"+item.agentName}}</p>
        <!-- icon -->
        <el-tag type="info">{{item.agentStatus}}</el-tag>
        <!-- <svg-icon class="matrixIcon" :icon-class="'infoCollectIcon'" :add-style="'color:'+(devRunStatuTrans[item.runningStatus]?devRunStatuTrans[item.runningStatus].devRunningStatusColor:'')+';'"></svg-icon> -->
        <!-- name -->
        <p>{{item.agentCompany}}</p>
        <!-- statu -->
        <!-- <span>{{devStatuTrans[item.deviceState]?devStatuTrans[item.deviceState].devStateName:""}}--{{devRunStatuTrans[item.runningStatus]?devRunStatuTrans[item.runningStatus].devRunningStatusName:""}}</span> -->
        <!-- statuLabel -->
        <div class="panelLabelCtn">

        </div>
      </div>
      <div style="clear:both;"></div>
    </div>
    <!-- 点击增加设备的功能 暂时取消 -->
    <!-- <div class="matrixPanel addPanel" @click="clickAdd">
      <svg-icon class="matrixPlusIcon" :icon-class="'plus'"></svg-icon>
    </div> -->
  </div>
</template>

<script>


//要使用全局的颜色global
//引入状态文字的关系
//引入运行状态文字的关系
//要用全局的配色去对应两种状态叠加的颜色

export default {
  async beforeCreate() {
  },
  data() {
    return {
      //状态对应文字
      devStatuTrans: {
        "9":{devState: "9", devStateName: "领用", devStateColor: "rgb(208,208,208)"},
        "0":{devState: "0", devStateName: "未启用", devStateColor: "rgb(208,208,208)"},
        "1":{devState: "1", devStateName: "在用", devStateColor: "rgb(103, 194, 58)"},
        "2":{devState: "2", devStateName: "停用", devStateColor: "rgb(208,208,208)"},
        "3":{devState: "3", devStateName: "报废", devStateColor: "rgb(208,208,208)"},
        },
      //运行状态对应文字
      devRunStatuTrans: {
        "0":{devRunningStatusName: "正常", devRunningStatus: "0", devRunningStatusColor: "rgb(103, 194, 58)"},
        "1":{devRunningStatusName: "停止服务", devRunningStatus: "1", devRunningStatusColor: "rgb(245, 108, 108)"},
        "2":{devRunningStatusName: "部分服务", devRunningStatus: "2", devRunningStatusColor: "rgb(230, 162, 60)"},
        "3":{devRunningStatusName: "未知", devRunningStatus: "3", devRunningStatusColor: "rgb(208, 208, 208)"},
        "4":{devRunningStatusName: "P通讯故障", devRunningStatus: "4", devRunningStatusColor: "rgb(245, 108, 108)"},
        "5":{devRunningStatusName: "维护", devRunningStatus: "5", devRunningStatusColor: "rgb(208, 208, 208)"},
        "6":{devRunningStatusName: "关机", devRunningStatus: "6", devRunningStatusColor: "rgb(208, 208, 208)"},
        "7":{devRunningStatusName: "停用", devRunningStatus: "7", devRunningStatusColor: "rgb(208, 208, 208)"},
      },
      //模块状态对应文字
      modelStatuTrans: {
        "0":{devModuleStatus: "0", devModuleStatusColor: "rgb(103, 194, 58)", devModuleStatusName: "正常"},
        "1":{devModuleStatus: "1", devModuleStatusColor: "rgb(245, 108, 108)", devModuleStatusName: "故障"},
        "2":{devModuleStatus: "2", devModuleStatusColor: "rgb(230, 162, 60)", devModuleStatusName: "警告"},
        "3":{devModuleStatus: "3", devModuleStatusColor: "rgb(208, 208, 208)", devModuleStatusName: "未知"},
      },
      //连接状态对应文字
      connStatuTrans: {
        "0":{devConnectStatusName: "正常", devConnectStatus: "0", devConnectStatusColor: "rgb(103, 194, 58)"},
        "1":{devConnectStatusName: "缺钞", devConnectStatus: "1", devConnectStatusColor: "rgb(230, 162, 60)"},
        "2":{devConnectStatusName: "异常", devConnectStatus: "2", devConnectStatusColor: "rgb(245, 108, 108)"},
        "3":{devConnectStatusName: "未知", devConnectStatus: "3", devConnectStatusColor: "rgb(208, 208, 208)"}
      },
      //卡箱状态对应文字
      cardStatuTrans: {
        "0":{devCardBoxStatusName: "全部可用", devCardBoxStatus: "0", devCardBoxStatusColor: "rgb(103, 194, 58)"},
        "1":{devCardBoxStatusName: "至少有一个可用", devCardBoxStatus: "1", devCardBoxStatusColor: "rgb(230, 162, 60)"},
        "2":{devCardBoxStatusName: "全部为空", devCardBoxStatus: "2", devCardBoxStatusColor: "rgb(245, 108, 108)"},
        "3":{devCardBoxStatusName: "未知", devCardBoxStatus: "3", devCardBoxStatusColor: "rgb(208, 208, 208)"}
      },
      //钞箱状态对应文字
      cashStatuTrans: {
        "0":{devCashBoxStatusName: "正常", devCashBoxStatus: "0", devCashBoxStatusColor: "rgb(103, 194, 58)"},
        "1":{devCashBoxStatusName: "缺钞", devCashBoxStatus: "1", devCashBoxStatusColor: "rgb(230, 162, 60)"},
        "2":{devCashBoxStatusName: "异常", devCashBoxStatus: "2", devCashBoxStatusColor: "rgb(245, 108, 108)"},
        "3":{devCashBoxStatusName: "未知", devCashBoxStatus: "3", devCashBoxStatusColor: "rgb(208, 208, 208)"}
      },

    };
  },
  watch: {

  },
  methods: {
    // clickDetail(item) {
    //   this.$emit("clickDetail", item, this.data);
    // },
    clickAdd() {
      this.$emit("clickAdd");
    }
  },
  props: ["data"]
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.matrix{
  margin:16px 0 0;
}
.labelOption {
  // display: flex;
  // flex-flow: row wrap;
  margin: 0 0 10px 0;
  .labelOptionItem {
    // display: flex;
    // flex-flow: row wrap;
    // align-items: center;
    float: left;
    margin: 0 10px;
    .label {
      display: inline-block;
      border-radius: 3px;
      height: 6px;
      width: 10px;
      margin: 0 5px 0 0;
    }
    .labelText {
      font-size: 12px;
    }
  }
}
// .matrixPanelCtn {
//   // display: flex;
//   // flex-flow: row wrap;
// }
.matrixPanel {
  float: left;
  width: 80px;
  height: 70px;
  text-align: center;
  margin: 10px 10px 15px 10px;
  padding: 20px 0;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
}
.matrixPanel > p {
  margin: 0;
  font-size: 12px;
  color: #888;
}
.matrixPanel > span {
  margin: 0;
  font-size: 12px;
  color: #aaa;
}
.matrixPanel.detailPanel {
  background: #fafafa;
}
.matrixPanel.detailPanel:hover {
  outline: 3px solid #08f;
}
.matrixIcon {
  height: 60px;
  width: 60px;
  color: #dadada;
  transition: 0.3s;
}
.matrixPanel.detailPanel:hover .matrixIcon {
  color: #08f;
}

.matrixPanel.addPanel {
  // background: #fafafa;
  border: 3px dashed #dadada;
  position: relative;
}
.matrixPlusIcon {
  height: 25px;
  width: 25px;
  color: #dadada;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  transition: 0.3s;
}
.matrixPanel.addPanel:hover .matrixPlusIcon {
  transform: scale(1.1);
  color: #888;
}
.panelLabelCtn {
  // position: absolute;
  // bottom: 0;
  // display: flex;
  // flex-flow: row nowrap;
  // justify-content: center;
  width: 65px;
  margin: 0 auto;
  div {
    float: left;
    height: 6px;
    width: 10px;
    border-radius: 3px;
    // background: #67c23a;
    margin: 4px 3px 0 3px;
  }
}
</style>
